// 让所有html结构 css样式加载完成后,才执行js
$(function(){
//主轮播图哒
$("#bannerInner").tyslide({
    boxh: 420,//盒子的高度
    w: 1000,//盒子的宽度
    h: 390,//图片的高度
    isShow: true,//是否显示控制器
    isShowBtn: true,//是否显示左右按钮
    controltop: 0,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
    controlsW: 20,//控制按钮宽度
    controlsH: 20,//控制按钮高度
    radius: 10,//控制按钮圆角度数
    controlsColor: "#d7d7d7",//普通控制按钮的颜色
    controlsCurrentColor: "#ff6600",//当前控制按钮的颜色
    isShowNum: true //是否显示数字
  });

  // 电子书轮播图
  $(".book_list .pptbox").tyslide({
        boxh: 218,//盒子的高度
        w: 326,//盒子的宽度
        h: 218,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: 14,//控制按钮宽度
        controlsH: 2,//控制按钮高度
        radius:0,//控制按钮圆角度数
        controlsColor: "#fff",//普通控制按钮的颜色
        controlsCurrentColor: "#ccc",//当前控制按钮的颜色
        isShowNum: false //是否显示数字
      });
      // 服饰轮播图
      // $("#cloth_box").tyslide({
      //   boxh: 330,//盒子的高度
      //   w: 429,//盒子的宽度
      //   h: 330,//图片的高度
      //   isShow: true,//是否显示控制器
      //   isShowBtn: true,//是否显示左右按钮
      //   controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
      //   controlsW: 14,//控制按钮宽度
      //   controlsH: 2,//控制按钮高度
      //   radius:0,//控制按钮圆角度数
      //   controlsColor: "#fff",//普通控制按钮的颜色
      //   controlsCurrentColor: "#ccc",//当前控制按钮的颜色
      //   isShowNum: false //是否显示数字
      // });
      
      // 形参：用来接收轮播图的jq对象==>最好使用层级选择器
      function my_silder(jq_obj,boxh_h,boxh_w,img_h,fy_w=14,fy_h=2){
          //任意区域的轮播图
        jq_obj.tyslide({
        boxh: boxh_h,//盒子的高度
        w: boxh_w,//盒子的宽度
        h: img_h,//图片的高度
        isShow: true,//是否显示控制器
        isShowBtn: true,//是否显示左右按钮
        controltop: 5,//控制按钮上下偏移的位置,要将按钮向下移动   首先保证boxh 高度>图片 h
        controlsW: fy_w,//控制按钮宽度
        controlsH: fy_h,//控制按钮高度
        radius:0,//控制按钮圆角度数
        controlsColor: "#fff",//普通控制按钮的颜色
        controlsCurrentColor: "#ccc",//当前控制按钮的颜色
        isShowNum: false //是否显示数字
      })
      }
      // 服饰区域的轮播图
      my_silder($("#cloth_box"),330,429,330)
      my_silder($("#cloth_box2"),330,429,330)
      my_silder($("#cloth_box3"),330,429,330)

      // 户外运动区域的轮播图
      my_silder($("#sports_box"),330,429,330)
      my_silder($("#sports_box2"),330,429,330)
      my_silder($("#sports_box3"),330,429,330)

      // 童装区域的轮播图
      my_silder($("#chliden_box"),330,429,330)
      my_silder($("#chliden_box2"),330,429,330)
      my_silder($("#chliden_box3"),330,429,330)


      //固定首行
     $(window).scroll(function(){
         let sTop=$(this).scrollTop()
         if(sTop>300){
             $("#fixedHeader").show()
         }else{
            $("#fixedHeader").hide()
         }
     })

    //  楼层滚动
    let bgcArr=["red","#f60","green","blue","pink"]
    $("#floorBox ul li").hover(function(){
        //这个函数做移入的
        $(this).css("width",80)
        let index=$(this).index()
        $(this).css("backgroundColor",bgcArr[index])
    },function(){
        //这个函数做移出的
        $(this).css("width",'')
        //$(this).css("background",'') ''表示用默认值
        $(this).css("background",'')
    })

    //点击滚动
    $("#floorBox ul li").click(function(){
        /*
            1.获取当前li 的索引 匹配指定楼层(如何匹配)
            
            2.设置滚动距离:
                找到对应的楼层 到 顶部的 距离:(如何获取这个距离)
                滚动到 距离就可以了
        */

        let index=$(this).index();

        //找楼层 主要是为了获取 楼层到 底部的距离(重点 获取位置)
        let sTop=$(".floor").eq(index).offset().top
        // 滚动到 sTop:如何到 哪里 照着下面抄
        $("html,body").animate({"scrollTop":sTop},100)
    })
    













})